<template>
  <div class="setting-task-card" v-loading="loading">
    <!-- start 头部 -->
    <div class="setting-task-card-header">
      <div class="setting-task-card-left">
        <p class="setting-back-btn" @click="back">
          <i class="iconfont icon-arrow-left"></i>{{$t('common.base.back')}}
        </p>
        <el-tooltip effect="dark" :content="$t('customer.setting.customerAddcardFormView.des1')" placement="bottom">
          <el-input class="setting-back-name" v-model="cardName" :placeholder="$t('customer.setting.customerAddcardFormView.pla1')" maxlength="20"></el-input>
        </el-tooltip>
      </div>
      <base-button
        type="primary"
        native-type="submit"
        :disabled="pending"
        @event="submit"
      >{{$t('common.base.save')}}</base-button
      >
    </div>
    <!-- end 头部 -->

    <!-- start 表单设计器 -->
    <div class="setting-task-design">
      <form-design
        v-model="fields"
        :max="maxField"
        :relation-field-options="relationOptions"
        mode="customer_card"
         ref="formDesign"
      ></form-design>
    </div>
    <!-- end 表单设计器 -->
    <relation-options-modal
      ref="relationOptionsModal"
      @confirm="relationOptionsConfirm"
    >
    </relation-options-modal>
  </div>
</template>

<script>
import CustomerAddcardFormView from './CustomerAddcardFormView';
export default CustomerAddcardFormView;
</script>

<style lang="scss">
@import "../../../task/taskAdditionalSetting/taskAddcardFormView/TaskAddcardFormView.scss";
</style>